<script setup lang="ts">
import APIFeedback from '~/api/feedback/index'
import APIAuth from '@/api/auth'
import type { FormRules } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { ElLoading, ElMessage } from 'element-plus'
import { useAuth } from '@/stores/auth/index'

definePageMeta({
    showSmallSearchBox: true,
})

const { isNextOperation } = useAuth()

const formData = ref<any>({})

const rules = reactive<FormRules>({
    type: [{ required: true, message: '请选择意见或建议类型', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }, {
        pattern: /^1[3-9]\d{9}$/, message: "请输入正确手机号码", trigger: 'blur'
    }],
    brief: [{ required: true, message: '请输入您的意见和建议', trigger: 'blur' }],
    smsCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
})

const opinionTypeList = ref<any>([])

function getOpinionTypeList() {
    APIFeedback.getOpinionTypeList().then(({ data }) => {
        opinionTypeList.value = data
    })
}

const ruleFormRef = shallowRef<FormInstance>()


const isShowSendBtn = shallowRef(true)

let timer: any
const countDown = shallowRef(60)

/** 发送验证码 */
function handleSendBinding() {
    if (!ruleFormRef.value) return
    ruleFormRef.value.validateField('phone', (valid) => {
        if (valid) {
            const loading = ElLoading.service({ lock: true })
            APIAuth.smsSend({
                phone: (formData.value.phone as string),
                source: 'pc'
            }).then(({ msg }) => {
                ElMessage.success(msg)
                isShowSendBtn.value = false
                if (timer) {
                    clearInterval(timer)
                    timer = null
                }
                timer = setInterval(() => {
                    countDown.value -= 1
                    if (countDown.value <= 0) {
                        clearInterval((timer as number))
                        timer = null
                        countDown.value = 60
                        isShowSendBtn.value = true
                    }
                }, 1000)
            }).finally(() => {
                loading.close()
            })
        }
    })
}

function submitFormData() {
    ruleFormRef.value?.validate((valid) => {
        if (valid) {
            if (!isNextOperation()) return
            APIFeedback.setOpinion(formData.value).then(() => {
                ElMessage.success('提交成功')
                ruleFormRef.value?.resetFields()
            })
        }
    })
}
const column = [{
    label: '入职心安元素',
    jumpLink: '/entry'
}, {
    label: '合作伙伴',
    jumpLink: '/cooperation'
}, {
    label: '在线客服',
    jumpLink: '/service'
}, {
    label: '帮助中心',
    jumpLink: '/help'
}, {
    label: '意见反馈',
    jumpLink: '/feedback',
    active: true
}]

const client = shallowRef<boolean>(false)

onMounted(() => {
    client.value = true
    getOpinionTypeList()
})

</script>

<template>
    <div class="feedback">
        <ColumnNav class="left-nav" :column="column" />
        <div class="feedback-content">
            <div class="feedback-title">谢谢您能给我们反馈意见，感谢！</div>
            <div class="feedback-conter">意见反馈说明</div>
            <div class="feedback-conter" style="text-indent: 2em;">
                您的信任对我们非常重要，我们深知用户信息安全的重要性，我们将按照法律法规要求，采取安全保护措施，保护您的用户信息安全可控。鉴此，湖南心安元素数字科技有限公司（或简称“我们”“心安元素”）制定本《法律声明及隐私权政策》
                (以下或简称“声明和政策”) 并提醒您:在使用心安元索网站的各项服务前，请您务必仔细阅读。</div>
            <el-form class="form-data" style="width: 446px;" ref="ruleFormRef" :model="formData" :rules="rules"
                label-width="120px" status-icon v-if="client">
                <el-form-item label="意见或建议类型" prop="type">
                    <el-select v-model="formData.type" placeholder="意见或建议类型">
                        <el-option v-for="(item, index) in opinionTypeList" :key="index" :label="item.title"
                            :value="item.type"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="意&nbsp;&nbsp;见&nbsp;&nbsp;或&nbsp;&nbsp;建&nbsp;&nbsp;&nbsp;议" prop="brief">
                    <el-input type="textarea" v-model="formData.brief" placeholder="请罗列您的意见和建议，越详细越好；" />
                </el-form-item>
                <el-form-item label="联&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;系&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;方&nbsp;&nbsp;&nbsp;式"
                    prop="phone">
                    <el-input v-model="formData.phone" placeholder="请输入手机号">
                        <template #append>
                            <span style="cursor: pointer;" @click="handleSendBinding"
                                v-show="isShowSendBtn">获取验证码</span>
                            <span v-show="!isShowSendBtn">{{ countDown }}s后重试</span>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item
                    label="验&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 码"
                    prop="smsCode">
                    <el-input v-model="formData.smsCode" placeholder="请输入验证码" />
                </el-form-item>
                <el-form-item label=" " prop="">
                    <button type="button" class="submit-btn" @click="submitFormData">提 交</button>
                </el-form-item>
            </el-form>
        </div>
        <div style="clear: both;"></div>
    </div>
</template>


<style lang="less" scoped>
.feedback {
    width: 1250px;
    margin: 0 auto;
    margin-top: 100px;
    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

    .left-nav {
        float: left;
        margin-right: 50px;
    }

    .feedback-content {
        width: 1000px;
        margin-bottom: 300px;
        overflow: hidden;

        .submit-btn {
            width: 325px;
            height: 35px;
            border-radius: 5px;
            background-color: rgba(249, 20, 20, 1);
            color: #ffffff;
            font-size: 13px;
            border: none;
            cursor: pointer;
        }

        .form-data {
            margin-top: 30px;
        }

        .feedback-conter {
            color: rgba(136, 136, 136, 1);
            font-size: 14px;
        }

        .feedback-title {
            color: rgba(16, 16, 16, 1);
            font-size: 22px;
            text-align: center;
            margin-bottom: 74px;
            font-family: 'SOURCEHANSANSCN-REGULAR';
        }
    }
}
</style>
